<template>
  <div class="box">
    <div class="posterbox">
      <!-- 封面图片 -->
      <img class="poster" v-lazy="info.poster" />
    </div>
    <div class="info-desn">
      <div class="film-name">{{ info.name }}</div>
    </div>
    <div class="actors">
      <div class="actors-title-bar">
        <span class="actors-title-text">演职人员</span>
      </div>
      <div class="swiper-container" ref="swiperRef">
        <div class="swiper-wrapper">
          <template v-for="(item, index) in info.actors">
            <div class="swiper-slide" :key="'actors_' + index">
              <img :src="item.avatarAddress" @click="showActors(index)" />
              <span>{{ item.name }}</span>
              <span>{{ item.role }}</span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// vnat提供图片预览效果
import { ImagePreview } from 'vant'
// 引入swiper所用的css
import 'swiper/swiper-bundle.min.css'
// 引入swiper的js类库
import Swiper from 'swiper'

export default {
  props: ['info'],
  // 获取dom元素，所以要注意使用在哪一个生命周期中
  mounted() {
    new Swiper(this.$refs.swiperRef, {
      // 一页显示几项
      slidesPerView: 4,
      // 每项之间的间隔
      spaceBetween: 10,
    })
  },
  methods: {
    showActors(startPosition = 0) {
      let images = this.info.actors.map((item) => item.avatarAddress)
      ImagePreview({
        images,
        startPosition,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  background: #f4f4f4;
  width: 100vw;
  .posterbox {
    height: 210px;
    overflow: hidden;
    .poster {
      width: 100vw;
    }
  }
  .info-desn {
    background: #fff;
    height: 120px;
    .film-name {
      color: #191a1b;
      font-size: 18px;
      height: 24px;
      line-height: 24px;
      margin-right: 7px;
    }
  }
  .actors {
    margin-top: 10px;
    background: #fff;
    .actors-title-bar {
      .actors-title-text {
        font-size: 16px;
        text-align: left;
        color: #191a1b;
      }
    }
  }
}
.swiper-slide {
  img {
    width: 85px;
    height: 117px;
  }
  span:nth-of-type(1) {
    display: inline-block;
    font-size: 12px;
    color: #191a1b;
    width: 85px;
    text-align: center;
  }
  span:nth-of-type(2) {
    display: inline-block;
    font-size: 10px;
    color: #797d82;
    width: 85px;
    text-align: center;
  }
}
</style>